import { Menu } from 'antd';
import { 
  Home, 
  Settings as SettingsIcon, 
  Download, 
  Share2, 
  Server, 
  ChevronLeft, 
  ChevronRight,
  Database,
  Users,
} from 'lucide-react';
import { Link, useLocation } from 'react-router-dom';
import React, { useState } from 'react';

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);

  const menuItems = [
    {
      key: '/',
      icon: <Home size={20} />,
      label: collapsed ? null : <Link to="/">仪表盘</Link>,
      title: '仪表盘'
    },
    {
      key: '/steam-setup',
      icon: <Download size={20} />,
      label: collapsed ? null : <Link to="/steam-setup">SteamCMD安装</Link>,
      title: 'SteamCMD安装'
    },
    {
      key: '/frp-setup',
      icon: <Share2 size={20} />,
      label: collapsed ? null : <Link to="/frp-setup">FRP配置</Link>,
      title: 'FRP配置'
    },
    {
      key: '/server-control',
      icon: <Server size={20} />,
      label: collapsed ? null : <Link to="/server-control">服务器控制</Link>,
      title: '服务器控制'
    },
    {
      key: '/database',
      icon: <Database size={20} />,
      label: collapsed ? null : <Link to="/database">数据库管理</Link>,
      title: '数据库管理'
    },
    {
      key: '/users',
      icon: <Users size={20} />,
      label: collapsed ? null : <Link to="/users">用户管理</Link>,
      title: '用户管理'
    },
    {
      key: '/settings',
      icon: <SettingsIcon size={20} />,
      label: collapsed ? null : <Link to="/settings">设置</Link>,
      title: '设置'
    },
  ];

  return (
    <div style={{ display: 'flex', height: '100vh', background: '#171717' }}>
      {/* 固定侧边栏 */}
      <div 
        className={`sidebar ${collapsed ? 'sidebar-collapsed' : 'sidebar-expanded'}`}
        style={{ 
          background: '#262626',
          borderRight: '1px solid #404040',
          boxShadow: '2px 0 8px rgba(0, 0, 0, 0.1)',
          position: 'fixed',
          left: 0,
          top: 0,
          height: '100vh',
          width: collapsed ? 80 : 240,
          zIndex: 1000,
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden'
        }}
      >
        {/* 折叠按钮 */}
        <button
          className="collapse-btn"
          onClick={() => setCollapsed(!collapsed)}
          title={collapsed ? '展开侧边栏' : '收起侧边栏'}
        >
          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
        </button>

        {/* Logo区域 - 固定高度 */}
        <div style={{ 
          height: 64, 
          margin: '16px 16px 24px', 
          fontWeight: 'bold', 
          fontSize: collapsed ? 16 : 20, 
          color: '#10B981', 
          textAlign: 'center',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          gap: collapsed ? 0 : 8,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          flexShrink: 0
        }}>
          <Server size={collapsed ? 20 : 24} />
          {!collapsed && <span>God-Panel</span>}
        </div>

        {/* 菜单容器 - 可滚动 */}
        <div style={{ 
          flex: 1, 
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column'
        }}>
          <Menu
            theme="dark"
            mode="inline"
            selectedKeys={[location.pathname]}
            items={menuItems}
            style={{ 
              background: '#262626', 
              borderRight: 0,
              padding: '0 8px',
              flex: 1,
              overflow: 'auto'
            }}
            className="custom-menu"
            inlineCollapsed={collapsed}
          />
        </div>
      </div>
      
      {/* 主内容区域 */}
      <div style={{ 
        flex: 1,
        marginLeft: collapsed ? 80 : 240,
        background: '#171717',
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column'
      }}>
        <div className="main-content" style={{ 
          margin: '24px', 
          background: 'none',
          padding: '0',
          flex: 1,
          overflow: 'auto'
        }}>
          {children}
        </div>
      </div>
    </div>
  );
};

export default Layout; 